import React, { Component, useState } from 'react'

export default function Fn() {
    let [num, setNum] = useState(0)
    let [form, setForm] = useState({
        name: 'jack'
    })

    function handleClick() {
        num++  //直接修改，无法引发视图更新
        console.log(num);
        // 作用：
        /* 
            1.用传入的新值修改num
            2.重新使用新的num渲染UI
        */
        // setNum(num + 1)
    }
    //对于对象类型的状态变量，应该始终传给set方法一个全新的对象来进行修改
    let updateForm = () => {
        //不会引发视图更新
        // form.name = '123'


        setForm({
            ...form,
            name: 'xixi1'
        })
    }
    return <>
        <div>useState</div>
        {num}
        <button onClick={handleClick}>修改num</button>
        <p> {form.name}</p>
        <button onClick={updateForm}>修改form的值</button>
    </>
}